<template>
    <div class="manage">
        <el-card class="box-card">
            <div class="manage-header">
                <!--      from搜索区-->
                <el-form ref="queryForm" :inline="true" :model="queryForm" class="demo-form-inline queryForm">
                    <el-form-item label="会议名称" prop="name">
                        <el-input size="mini" v-model="queryForm.name" placeholder="会议名称"></el-input>
                    </el-form-item>
                    <el-form-item size="mini" label="会议时间" prop="time">
                        <!--            <el-input clearable size="mini" v-model="queryForm.time" placeholder="会议时间"></el-input>-->
                        <div class="block">
                            <el-date-picker
                                    v-model="form.time"
                                    type="datetime"
                                    placeholder="选择日期时间"
                                    align="right"
                                    :picker-options="pickerOptions">
                            </el-date-picker>
                        </div>
                    </el-form-item>
                    <el-form-item label="会议地点" prop="location">
                        <el-select clearable size="mini" v-model="queryForm.location" placeholder="会议地点"><!--选择器-->
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="会议状态" prop="status">
                        <!--            <el-input size="mini" v-model="queryForm.status" placeholder="会议状态"></el-input>-->
                        <el-select clearable size="mini" v-model="queryForm.status" placeholder="会议状态"><!--选择器-->
                            <el-option
                                    v-for="item in status"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="mini" @click="onQuerySubmit">查询</el-button>
                    </el-form-item>
                    <!-- 添加重置按钮 -->
                    <el-form-item>
                        <el-button size="mini" @click="resetQueryForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="common-table">
                <!-- max-height="380"  -->
                <el-table
                        :data="tableData"
                        stripe
                        style="width: 100%">
                    <template slot="empty">
                        <!--            <img src="../assets/iocnFonts/no-data.png" width="300"/>-->
                        <div><span>暂无数据，稍后重试</span></div>
                    </template>
                    <el-table-column
                            prop="name"
                            label="会议名称"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="会议状态"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="time"
                            label="会议时间"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="location"
                            label="会议地点"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            show-overflow-tooltip
                            prop="attendees"
                            label="会议参加者"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="agenda"
                            label="会议议程"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="minutes"
                            label="会议纪要"
                            width="180">
                    </el-table-column>
                    <!--          fixed="right"-->
                </el-table>
            </div>
            <!--分页区-->
            <div class="block" style="margin:20px 0 0 15px ;">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="tablePage.pageNum"
                        :page-sizes="[ 5,10, 15,20]"
                        :page-size="tablePage.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>

    import {getMeetingById, getMeetingList} from "@/api/Meeting";

    export default {
        data() {
            return {
                dialogVisible: false,
                //表单数据
                form: {},
                queryForm: {//查询表单数据
                    name: '',
                    status: '',
                    time: '',
                    location: ''
                },
                rules: {},
                tableData: [],
                tablePage: {
                    pageNum: 1,//当前页
                    pageSize: 10,//每页条数
                },
                total: 0,
                modelType: 0,
                status: [{//选择会议状态选项
                    value: '已召开',
                    label: '已召开'
                }, {
                    value: '待召开',
                    label: '待召开'
                }],
                options: [{//选择会议地点选项
                    value: '会议室1',
                    label: '会议室1'
                }, {
                    value: '会议室2',
                    label: '会议室2'
                }, {
                    value: '会议室3',
                    label: '会议室3'
                }, {
                    value: '会议室4',
                    label: '会议室4'
                }, {
                    value: '会议室5',
                    label: '会议室5'
                }],
                pickerOptions: {//时间选择器
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                value1: '',
                value2: '',
                value3: ''
            };
        },
        methods: {
            // 弹窗关闭的时候调用
            handleClose() {
                // 清空表单
                this.form = {}
                this.dialogVisible = false
            },
            cancel() {
                this.handleClose()
            },

            getList() {
                const params = {
                    pageNum: this.tablePage.pageNum,
                    pageSize: this.tablePage.pageSize,
                    name: this.queryForm.name,
                    status: this.queryForm.status,
                    time: this.queryForm.time,
                    location: this.queryForm.location
                }
                console.log(params, 'params')
                getMeetingList({params}).then(res => {
                    console.log(res, 'res')
                    this.tableData = res.data.data
                    this.total = res.data.total || 0
                }).catch(() => {
                    this.$message.error('获取数据失败')
                })
            },
            handleSizeChange(pageSize) {
                this.tablePage.pageSize = pageSize
                this.getList()//刷新数据
            },
            handleCurrentChange(currentPage) {
                this.tablePage.pageNum = currentPage
                this.getList()//刷新数据
            },
            onQuerySubmit() {
                this.$refs.queryForm.validate((valid) => {
                    if (valid) {
                        // 提交表单
                        this.getList()
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetQueryForm() {
                this.$refs.queryForm.resetFields();
            }
        },
        mounted() {
            this.getList()
        }
    }
</script>

<style lang="less" scoped>
    .manage {
        height: 100%;

        .common-table {
            position: relative;
            height: calc(100% - 50px);

            /deep/ .el-table td {
                /* 设置表格内容字体居中 */
                text-align: center;
            }

            /deep/ .el-table th {
                /* 设置表头文字居中 */
                text-align: center;
            }
        }
    }
</style>
